<template>
	<!-- 这是选择门票和价格进行下单的组件 -->
	<view class="sku">
		<u-popup mode="bottom" :closeable="true" :round="10" :show="show" @close="onClosePoup">
			<view class="ticket-details u-flex u-flex-column">

				<view class="poup-title u-p-25">
					<view class="color-main u-line-2 u-margin-bottom-10   u-margin-right-50">
						<text class="font-size20 font-weight">{{good.title}}</text>
					</view>

					<view class="u-padding-top-20 font-size16 color-red font-weight">
						<text class="">¥</text>
						<text class="">{{price}}</text>
					</view>
				</view>

				<view class="ticket-details-content u-p-25">

					<scroll-view :scroll-y="true" :scroll-x="false" scroll-with-animation
						class="ticket-details-content_scroll" :show-scrollbar="false">
						<view class="sku-section">
							<text class="vertical-line" :style="{backgroundColor:ee.bgColor.weight}"></text>
							<text>选择商品</text>
						</view>

						<view v-for="(data,k) in good.tickets" :key="k" class="content-group">
							<view v-if="!ticket_id || (ticket_id==data.id)" @tap="onSelectTicket(data.id)"
								class="ticket-title u-line-1" :class="[( currr_ticket_id==data.id ) && 'active']">
								<text class="font-size14"> {{data.title}} </text>
							</view>
						</view>

						<view class="sku-section u-margin-top-30">
							<text class="vertical-line" :style="{backgroundColor:ee.bgColor.weight}"></text>
							<text>选择日期</text>
						</view>

						<view class="select-day u-margin-top-30">
							<view class="select-item u-flex u-flex-between" @click="onShowCalendar">
								<view class="title">
									<text>使用时间</text>
								</view>
								<view class="result u-flex align-center">
									<view class="">
										<text class="font-size14"> {{day_select}} </text>
									</view>
									<view class="">
										<u-icon name="arrow-right" size="14"></u-icon>
									</view>
								</view>
							</view>
							<!-- 选择日期组件 -->
							<up-calendar :show="showCalendar" mode="single" @close="onCloseCalendar" :round="10"
								confirmText="确认选择日期" :max-date="maxDate" :defaultDate="day_select"
								@confirm="onCalendarConfirm" ref="calendar"></up-calendar>
						</view>

						<view class="buy-nums u-flex u-flex-between u-margin-top-30">

							<view class="sku-section">
								<text class="vertical-line" :style="{backgroundColor:ee.bgColor.weight}"></text>
								<text>购买数量</text>
							</view>
							<view class="">
								<up-number-box :disabled="disableBuyNum" v-model="buy_num" @change="changeBuyNum"></up-number-box>
							</view>

						</view>


					</scroll-view>

				</view>

				<view class="sheet-action u-padding-25">
					<view class="order-btn" @tap="onClickBuyBtn" :style="{backgroundColor:ee.bgColor.weight}">
						<text class="font-size15">确认</text>
					</view>
				</view>

			</view>

		</u-popup>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs/esm/index'

	import {
		ref,
		reactive,
		onMounted,
		onActivated,
		watchEffect,
		watch,
		provide,
		nextTick,
		computed,
		getCurrentInstance,
	} from 'vue';

	import {
		onReady
	} from '@dcloudio/uni-app';

	import {
		getTicketPrice,
		verifyTime
	} from "@/common/api.js";

	import {
		usePageStore
	} from "@/common/tools/store.js"
	//定义v-model双向数据
	const emit = defineEmits(['update:show']);

	const props = defineProps({
		good: {
			type: Object
		},
		show: {
			type: Boolean
		},
		//外部设置购买门票id
		ticket_id: {
			type: [String, Number]
		}
	})
	const price = ref(0);
	const remark_list = ref([]);
	const inner_ticket_id = ref(0)
	const buy_num = ref(1);
	const today = dayjs(new Date()).format("YYYY-MM-DD");
	const day_select = ref(today);
	const ticket_prices = ref([]); //当前门票的2个月每日价格
	const {
		proxy
	} = getCurrentInstance();
	const maxDate = dayjs().add(3, 'month').format("YYYY-MM-DD");
	//日期选择
	const showCalendar = ref(false);
	const store = usePageStore();

	function onCloseCalendar() {
		showCalendar.value = false;
	}

	function onCalendarConfirm(e) {
		showCalendar.value = false;
		day_select.value = e[0];
		//选择日期的门票价格
		let today = e[0];
		if (ticket_prices.value[today])
			price.value = ticket_prices.value[today]
	}

	function onShowCalendar() {
		// console.log('门票',currr_ticket_id.value)
		if (!currr_ticket_id.value) {
			uni.showToast({
				icon: 'none',
				title: '请选择门票'
			})
		} else {
			showCalendar.value = !showCalendar.value;
		}
	}
	watch(()=>props.good, (n,o)=>{
		day_select.value = n.start_select_day;
		 
	})
	//监听 1、内部选择门票变化
	watch(() => props.ticket_id, (n, o) => {
		inner_ticket_id.value = n;
	})
	//当前选中的门票id ,它可能是外部设置的，也可能是点击选中的
	const currr_ticket_id = computed(() => inner_ticket_id.value ? inner_ticket_id.value : props.ticket_id)
	//如果当前门票选择变化，1、内部选择，2=外部设置
	watch(currr_ticket_id, (newValue, oldValue) => {
		// console.log('watch_current_ticket_id', newValue)
		if (newValue) {
			getTicketPrice(newValue).then((ret) => {
				ticket_prices.value = ret;
				price.value = ret[day_select.value ] ?? '0'; //显示当前价格
				// console.log( proxy.$refs)
				proxy.$refs.calendar.setFormatter(formatter);
			})
		}
	})
	//格式化日历的每日价格
	const formatter = (day) => {
		let today = dayjs(day.date).format("YYYY-MM-DD");
		if (ticket_prices.value[today]) {
			day.bottomInfo = '¥' + ticket_prices.value[today];
		}
		return day;
	}

	//显示u-pop对话框
	function onShowDetails() {
		emit('update:show', true)
	}
	//关闭u-pop对话框
	function onClosePoup() {
		emit('update:show', false)
	}
	//点击确定按钮
	function onClickBuyBtn() {
		console.log('onClickBuyBtn', currr_ticket_id.value)
		if (currr_ticket_id.value == 0) {
			emit('update:show', false);
			//什么都没有选择，关闭窗口
			return;
		}
		let formData = {
			price: price.value,
			ticket_id: currr_ticket_id.value,
			buy_num: buy_num.value,
			day_select: day_select.value,
			good_id: props.good.id,
		}
		//检测当前选择的时间是否允许购买
		verifyTime(formData).then((ret) => {			
			//加入购物车数据
			store.setShopCart( formData )
			store.jumpto('/pages/mall/buy')
		},(fail)=>{
			console.log(fail)
		})
		
	}
	//选择门票设置id
	function onSelectTicket(id) {
		inner_ticket_id.value = id;
		//console.log(currr_ticket_id)
	}
	//禁止选择数量
		
	const disableBuyNum = computed(()=>{
		if(!props.good.tickets) return true;
		//只有门票可以选择购买数量
		const current_ticket = props.good.tickets.find(item => currr_ticket_id.value == item.id);
		if(current_ticket && current_ticket.ticket_type==1) {			
			return false;
		}
		buy_num.value = 1;	
		return true;
	})
	//选择数量
	function changeBuyNum(v) {
		 buy_num.value = v.value;		 
	}
</script>

<style lang="scss" scoped>
	.poup-title {
		border-bottom: $u-border-color 1px solid;
	}

	.ticket-details {
		height: calc(100vh - 100px);

		&-content {
			flex: 1;
			height: calc(100vh - 300px);
		}

		.ticket-details-content_scroll {
			height: 100%;
		}
	}

	.order-btn {
		color: #ffffff;
		padding: 10px;
		text-align: center;
		font-weight: bold;
		border-radius: 4px;
	}

	.content-group {
		display: flex;
		flex-direction: column;
	}

	.ticket-title {
		background-color: #F2F2F2;
		border: #F2F2F2 1px solid;
		border-radius: 50px;
		text-align: center;
		padding: 10px;
		margin-top: 10px;
	}

	.active {
		background-color: #EDF5FF !important;
		color: $u-primary !important;
		border: $u-primary 1px solid;
		font-weight: bold;
	}

	.sku-section {
		display: flex;
		align-items: center;
		margin-bottom: .9rem;
		margin-top: .9rem;

		.vertical-line {
			content: '';
			display: inline-block;
			height: 15px;
			width: 4px;
			background-color: $u-primary;
			margin-right: 8px;
			border-radius: 4px;
		}
	}

	.buy-nums {
		align-items: center;
	}

	.select-day {
		background-color: #F2F2F2;
		padding: 10px;
		border-radius: 4px;
	}
</style>